<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderDetail } from '@/api/apis'

// 示例：请求订单详情
// async function fetchOrderDetail(id) {
//   const res = await post('/order/detail', { id })
//   order.value = res.data
// }

const route = useRoute()
const router = useRouter()
const order = ref(null)
const dishList = ref([])

async function fetchOrderDetail() {
  const res = await getOrderDetail({ id: route.params.id })
  if (res.code === 200) {
    order.value = res.data
    dishList.value = res.data.items || res.data.dishList || []
  }
}

// 返回订单列表
function handleBack() {
  router.push({ name: 'OrderList' })
}

onMounted(fetchOrderDetail)
</script>

<template>
  <div>
    <el-card v-if="order" class="no-border">
      <div class="order-detail-header">
        <span class="order-detail-title">订单详情</span>
        <el-button @click="handleBack">返回</el-button>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ order.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{ order.userName }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ order.totalAmount }} 元</el-descriptions-item>
        <el-descriptions-item label="状态">{{ order.statusText }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.orderDate }}</el-descriptions-item>
        <el-descriptions-item label="菜单日期">{{ order.menuDate }}</el-descriptions-item>
        <el-descriptions-item label="餐别">{{ order.mealType }}</el-descriptions-item>
        <el-descriptions-item label="退款时间" v-if="order.refundTime">{{ order.refundTime }}</el-descriptions-item>
      </el-descriptions>
      <div v-if="dishList.length" class="order-items">
        <div class="order-items-title">菜品明细</div>
        <el-table :data="dishList" class="no-table-border" style="width: 100%">
          <el-table-column prop="dishName" label="菜品名称" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="price" label="单价" />
        </el-table>
      </div>
    </el-card>
    <div v-else class="order-empty">未找到该订单</div>
  </div>
</template>

<style scoped>
.order-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.order-detail-title {
  font-size: 20px;
  font-weight: bold;
}
.no-border {
  border: none !important;
  box-shadow: none !important;
}
.no-table-border .el-table__inner-wrapper,
.no-table-border .el-table__body,
.no-table-border .el-table__header {
  border: none !important;
}
.no-table-border .el-table__cell {
  border-bottom: none !important;
}
.order-items {
  margin-top: 24px;
}
.order-items-title {
  font-weight: bold;
  margin-bottom: 8px;
}
.order-empty {
  text-align: center;
  margin: 32px 0;
}
</style> 